<template>
    <div class="madp-hot-list-look-view">
        <el-row v-if="hotState > 2">
            筛选:
            <el-radio-group v-model="chooseRadio" class="madp-hot-radio" @change="changeRadioFn">
                <el-radio v-for="(item, index) in radioData" :key="index" :label="item.labelID">{{ item.radioName }}</el-radio>
            </el-radio-group>
        </el-row>
        <el-divider v-if="hotState > 2"></el-divider>
        <el-table
            ref="classTable"
            :data="classData"
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            stripe
            row-key="orderBy"
        >
            <el-table-column prop="orderBy" label="排名"></el-table-column>
            <el-table-column prop="type" label="类型">
                <template slot-scope="scope">{{ handleType(scope.row.type) }}</template>
            </el-table-column>
            <el-table-column label="内容" width="350" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div class="madp-class-content">
                        <!-- 图片会显开始 -->
                        <el-image v-if="scope.row.type === 1 || scope.row.type === 2" class="madp-content-imgage" :size="100" fit="cover" :src="scope.row.marketingCover"></el-image>
                        <el-image v-if="scope.row.type === 3" class="madp-content-imgage" :size="100" fit="cover" :src="scope.row.marketingUrl"></el-image>
                        <svg class="madp-icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-4" v-if="scope.row.type === 4" />
                        </svg>
                        <svg class="madp-icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-1" v-if="scope.row.type === 5" />
                        </svg>
                        <svg class="madp-icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-" v-if="scope.row.type === 6" />
                        </svg>
                        <svg class="madp-icon" aria-hidden="true">
                            <use xlink:href="#icon-yunpanlogo-3" v-if="scope.row.type === 7" />
                        </svg>

                        <!-- 图片会显结束 -->

                        <div class="madp-content-title">{{ scope.row.title ? scope.row.title : '--' }}</div>

                        <div class="madp-content-desc" v-if="scope.row.type === 1 || scope.row.type === 2">
                            {{ scope.row.marketingDescribe ? scope.row.marketingDescribe : '--' }}
                        </div>
                        <div class="madp-content-desc" v-if="scope.row.type === 3 || scope.row.type === 4 || scope.row.type === 5 || scope.row.type === 6 || scope.row.type === 7">
                            {{ scope.row.marketingSize ? scope.row.marketingSize : '--' }}
                        </div>
                        <div class="madp-content-time">创建时间:{{ scope.row.updateTime }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-if="hotState === 1 || hotState === 3" prop="send" label="发送次数"></el-table-column>
            <el-table-column v-if="hotState === 2 || hotState === 4" prop="open" label="打开次数"></el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <a v-if="scope.row.type === 1 || scope.row.type === 2 || scope.row.type === 3" :href="scope.row.marketingUrl" target="_blank">
                        <el-button type="text">查看</el-button>
                    </a>
                    <a v-else :href="scope.row.marketingUrl" :download="scope.row.title">
                        <el-button type="text">下载</el-button>
                    </a>
                </template>
            </el-table-column>
        </el-table>
        <div class="madp-pagination">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.pageCurrent"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { openAndSendTimes, typeOpenAndSendTimes } from '@/api/customer-into/marketing-material';
export default {
    props: {
        //1.发送次数 2.打开次数 3.发送次数 4，打开次数
        hotState: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            chooseRadio: 1, //默认选中
            // 类型数据
            radioData: [
                { radioName: '文章', labelID: 1 },
                { radioName: '链接', labelID: 2 },
                { radioName: '海报', labelID: 3 },
                { radioName: 'PDF', labelID: 4 },
                { radioName: 'PPT', labelID: 5 },
                { radioName: '表格', labelID: 6 },
                { radioName: '文档', labelID: 7 }
            ],
            classData: [],
            // 分页
            page: {
                pageCurrent: 1, // 当前页
                pageSize: 10,
                total: 0
            }
        };
    },
    mounted() {
        this.openAndSendAllFn();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.pageCurrent - 1) * this.page.pageSize + $index + 1;
        },
        //选择类型
        changeRadioFn() {
            this.page.current = 1;
            this.openAndSendAllFn();
        },
        // 处理data中type的格式
        handleType(type) {
            switch (type) {
                case 1:
                    return '文章';
                case 2:
                    return '链接';
                case 3:
                    return '海报';
                case 4:
                    return 'pdf';
                case 5:
                    return 'ppt';
                case 6:
                    return '表格';
                case 7:
                    return '文档';
            }
        },
        openAndSendAllFn() {
            if (this.hotState === 1 || this.hotState === 2) {
                this.openAndSendTimesFn();
            } else {
                this.typeOpenAndSendTimesFn();
            }
        },
        //分页
        handleSizeChange(val) {
            this.page.current = 1;
            this.page.pageSize = val;
            this.openAndSendAllFn();
        },
        // 分页
        handleCurrentChange(val) {
            this.page.current = val;
            this.openAndSendAllFn();
        },
        //得到素材打开次数和发送次数
        openAndSendTimesFn() {
            let obj = {
                pageCurrent: this.page.pageCurrent,
                pageSize: this.page.pageSize,
                hotState: this.hotState
            };
            openAndSendTimes(obj).then((res) => {
                if (res.data.code === 0) {
                    if (res.data.data && res.data.data.records && Array.isArray(res.data.data.records) && res.data.data.records.length > 0) {
                        this.classData = res.data.data.records;
                        this.page.total = res.data.data.total;
                    } else {
                        this.classData = [];
                        this.page.total = 0;
                    }
                }
            });
        },
        //根据类型得到素材打开次数和发送次数
        typeOpenAndSendTimesFn() {
            let obj = {
                pageCurrent: this.page.pageCurrent,
                pageSize: this.page.pageSize,
                hotState: this.hotState,
                type: this.chooseRadio
            };
            typeOpenAndSendTimes(obj).then((res) => {
                if (res.data.code === 0) {
                    if (res.data.data && res.data.data.records && Array.isArray(res.data.data.records) && res.data.data.records.length > 0) {
                        this.classData = res.data.data.records;
                        this.page.total = res.data.data.total;
                    } else {
                        this.classData = [];
                        this.page.total = 0;
                    }
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-class-content {
    position: relative;
    height: 80px;
    .madp-content-imgage {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 100%;
    }
    .madp-content-title {
        position: absolute;
        top: 5px;
        left: 60px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .madp-content-desc {
        position: absolute;
        top: 30px;
        left: 60px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .madp-content-time {
        position: absolute;
        bottom: 0;
        left: 60px;
    }
}
/deep/ .el-table td {
    padding: 0;
}
.madp-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}
.madp-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    fill: currentColor;
}
.madp-hot-radio {
    width: 80%;
}
</style>
